<template>
  <div class="_page">
    <div class="cnt">
	  <div class="top">
		<div class="search">
			{{ route.query.typeName }}
		</div>
		<div class="info">
			<span>{{ typeDepict }}</span>
		</div>
	  </div>
	  <div class="list_box">
		  <!-- <div class="oper">oper</div> -->
		  <div class="list">
			  <div v-for="(item, idx) in list" :key="idx" class="list_item">
				<img :src="previewUrl + item.mainImageUrl" alt="">

				<div class="btns">
					<button @click="gotoDetail(item)">FULL DETAILS</button>
					<button v-if="item.documentUrl" @click="downLoad(item)"><el-icon><Download /></el-icon> BROCHURE</button>
				</div>

				<div class="infos">
					<span>{{ item.model }}</span>
					<!-- <span>length: {{ item.length }}</span> -->
				</div>
			  </div>
		  </div>
		  
			<div class="pag">
				<el-pagination
					v-model:current-page="pageNo"
					:page-size="pageSize"
					:background="false"
					layout="prev, pager, next"
					:total="total"
					@size-change="handler"
					@current-change="getPage"
				/>
			</div>
	  </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import { ref, onMounted, reactive, watch } from 'vue'
import { vesselsGetPage } from '@/api/boat/basic'
import { typeGetAll } from '@/api/boat/type'
import { brandGetAll } from '@/api/boat/brand'
import { downLoadFile } from '@/api/system/setting'
import echarts from '@/components/echarts'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

let $router = useRouter()
let route = useRoute()

let userStore = useUserStore()
const previewUrl = ref(import.meta.env.VITE_IMG_SERVE)

watch(() => route, (newVal) => {
	
	if (newVal.query.typeId) {
		query.typeId = newVal.query.typeId
		getPage()
	}
}, {deep: true})
let typeDepict = ref('')
onMounted(() => {
	query.typeId = route.query.typeId || ''
	typeDepict.value = route.query.typeDepict || ''
  getPage()
  getBrands()
  getTypes()
})

//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)

let total = ref<number>(0)
let list = ref([])

const query = reactive({
  typeId: '',
  brandId: '',
  model: '',
})
const getPage = async (pager = 1) => {
	try{
  		pageNo.value = pager

		let { data, status } = await vesselsGetPage({
			pageNo: pageNo.value,
			pageSize: pageSize.value,
			...query
		})
		
		if (status == 200) {
			let { records, total: tatalNums } = data
			total.value = tatalNums
			list.value = records
		} else {
			// ElMessage({ type: 'error', message: msg })
		}
	}catch(e){
		//TODO handle the exception
	}
}

const search = () => {
  getPage(1)
}

let brands = ref([])
const getBrands = async () => {
  let { status, data } = await brandGetAll()

  if (status == 200) {
    brands.value = data
  }
}


let types = ref([])
const getTypes = async () => {
  let { status, data } = await typeGetAll()

  const resolve = (list) => {
    list.forEach(element => {
      if (element.children && element.children.length) {
        element.disabled = true
      }
    })
  }
  resolve(data)

  if (status == 200) {
    types.value = data
  }
}

const downLoad = async (row) => {
	try {
		let res = await downLoadFile(row.documentUrl)
		let blob = new Blob([res], {
			type: "application/vnd.ms-excel;charset=utf-8",
		})
		let link = document.createElement('a')
		link.href = URL.createObjectURL(blob)
		link.download = row.documentUrl
		link.click()
	} catch (error) {
		ElNotification({
			type: 'warning',
			title: t('operation.mention'),
			message: t('operation.noneFile'),
			offset: 100,
		})
	}
}

const gotoDetail = (row) => {
	$router.push({
		path: '/boats/detail',
		query: {
			id: row.id
		}
	})
}
</script>

<style lang="scss" scoped>
$same_color: $theme-primary;
._page {

}
.cnt {

  .top {
	position: relative;

	.search {
		background-color: $theme-primary;
		color: #fff;
		padding: 20px;
		text-align: center;
		font-size: 1.7rem;
	}

	.info {
		width: 50%;
		margin: 40px 0 40px 25%;
		color: #636363;

		span {
			display: block;
			line-height: 1.2;
			text-align: center;
		}
	}
  }

  .list_box {
	.list {
		display: flex;
		flex-wrap: wrap;
		.list_item {
			position: relative;
			flex: 0 1 calc(50% - 20px);
			overflow: hidden;
			margin: 0 10px 20px;
			height: 500px;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: all .5s;
			}

			.infos {
				position: absolute;
				right: 10%;
				top: 60%;
				color: #f4f4f8;
				transform: translate(-50%, -50%);
				transition: all .5s;

				span {
					display: block;
					line-height: 1.5;
					font-style: italic;
					font-size: 2.7rem;
				}
			}

			&:hover {
				img {
					transform: scale(1.2);
				}
				.btns {
					opacity: 1;
				}

				.infos {
					opacity: 0;
				}
			}

			.btns {
				display: flex;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				opacity: 0;
				transition: all .5s;

				button {
					border: 0;
					margin: 0 10px;
					padding: 6px 40px;
					cursor: pointer;
					word-break: keep-all;
					white-space: nowrap;

					&:first-child {
						color: $theme-primary;
					}
					&:last-child {
						background-color: $theme-primary;
						color: #fff;
					}
				}
			}
		}

	}

	.pag {
		display: flex;
		justify-content: center;
	}
  }
}

@media (max-width: 768px) { 
	.cnt {

		.top {
			.info {
				width: 100%;
				margin-left: 0;
			}
		}

		.list_box {
			.list {
				.list_item {
					flex: 1 1 100%;
					margin: 0 0 20px;
					height: 300px;
					min-height: 300px;
				}
			}
		}
	}
}
</style>